<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
</style>
<template>
  <div class="outstore">
    <div  style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{title}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <input type="hidden" name="outtype" value="4" />
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">领料单编号</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly :value="picklist.code" name="">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">货品所属</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="picklist.orgname">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">所在班组</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="picklist.departmentname">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">库房</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly :value="picklist.strname">
            </div>
          </div>
<!--          <div class="weui-cell" v-if="picklist.picktype == 3">-->
<!--            <div class="weui-cell__hd"><label for="" class="weui-label">出库类型</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <select class="weui-select" name="" v-model="picktype" >-->
<!--                <option value="2">产成品库</option>-->
<!--                <option value="3">次品库</option>-->
<!--              </select>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell fir">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">提交人</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" readonly name="" :value="picklist.operatorName">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">创建时间</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" readonly type="text" name="" :value="picklist.createtime">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="oitem" v-for="(product, index) in picklist.items" :key="product.guid">
          <input type="hidden" :name="'items[' + index + '].productguid'" :value="product.productid" />
          <input type="hidden" :name="'items[' + index + '].productname'" :value="product.product" />
          <input type="hidden" :name="'items[' + index + '].spguid'" :value="product.speid" v-if="picklist.picktype != 2" />
          <div class="weui-cells__title">货品明细 {{index + 1}}</div>
          <div class="weui-cell fir">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="" readonly="true" :value="product.product">
            </div>
          </div>
          <div class="weui-cell" v-show="picklist.picktype == 2">
            <div class="weui-cell__hd"><label for="" class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select spec" v-if="index==0" :name="'items[' + index + '].spguid'" v-model="spec0" >
                <option value="0">请选择规格</option>
                <option v-for="(spec, index) in product.spes" :key="spec.spguid" :value="spec.spguid">{{spec.specName}}</option>
              </select>
              <select class="weui-select spec" v-if="index==1" :name="'items[' + index + '].spguid'" v-model="spec1" >
                <option value="0">请选择规格</option>
                <option v-for="(spec, index) in product.spes" :key="spec.spguid" :value="spec.spguid">{{spec.specName}}</option>
              </select>
              <select class="weui-select spec" v-if="index==2" :name="'items[' + index + '].spguid'" v-model="spec2" >
                <option value="0">请选择规格</option>
                <option v-for="(spec, index) in product.spes" :key="spec.spguid" :value="spec.spguid">{{spec.specName}}</option>
              </select>
              <select class="weui-select spec" v-if="index==3" :name="'items[' + index + '].spguid'" v-model="spec3" >
                <option value="0">请选择规格</option>
                <option v-for="(spec, index) in product.spes" :key="spec.spguid" :value="spec.spguid">{{spec.specName}}</option>
              </select>
              <select class="weui-select spec" v-if="index==4" :name="'items[' + index + '].spguid'" v-model="spec4" >
                <option value="0">请选择规格</option>
                <option v-for="(spec, index) in product.spes" :key="spec.spguid" :value="spec.spguid">{{spec.specName}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" :name="'items[' + index + '].weight'" placeholder="请输入重量">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <!--              <input class="weui-input shrguid" :id="'shrguid' + index" type="text" name="" placeholder="请选择库间">-->
              <!--              <input type="hidden" :id="'shrid' + index" name="items[0].shrguid">-->
              <select class="weui-select room" :name="'items[' + index + '].shrguid'" >
                <option value="0">请选择库间</option>
                <option  v-if="index == 0" v-for="(hou, i) in house0" :key="hou.value" :value="hou.value">{{hou.title}} &nbsp; ({{hou.storeqty}} {{hou.unit}})</option>
                <option  v-if="index == 1" v-for="(hou, i) in house1" :key="hou.value" :value="hou.value">{{hou.title}} &nbsp; ({{hou.storeqty}} {{hou.unit}})</option>
                <option  v-if="index == 2" v-for="(hou, i) in house2" :key="hou.value" :value="hou.value">{{hou.title}} &nbsp; ({{hou.storeqty}} {{hou.unit}})</option>
                <option  v-if="index == 3" v-for="(hou, i) in house3" :key="hou.value" :value="hou.value">{{hou.title}} &nbsp; ({{hou.storeqty}} {{hou.unit}})</option>
                <option  v-if="index == 4" v-for="(hou, i) in house4" :key="hou.value" :value="hou.value">{{hou.title}} &nbsp; ({{hou.storeqty}} {{hou.unit}})</option>
              </select>
            </div>
          </div>
        </div>
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" id="remark" name="remark" placeholder="请输备注内容" rows="3"></textarea>
            </div>
          </div>
        </div>

        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
              <div class="weui_uploader_hd weui_cell" style="padding-left: 0;">
                <div class="weui_cell_bd weui_cell_primary" id="outstore">单据上传</div>
                <div class="weui_cell_ft" id=""></div>
              </div>
              <div class="weui_uploader_bd">
                <ul class="weui-uploader_files" id="images">
                  <li class="weui-uploader_file" v-for="(img, index) in images.serverId" :id="img"  @click=del(img) ><img :src="images.srcStr[index]" width="85" /></li>
                </ul>
                <div class="weui_uploader_input_wrp">
                  <input type="button" id="selectImage"  class="weui_uploader_input" >
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn" href="javascript:" @click="postForm">出库</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk';

  export default {
    name: 'OutStoreRm',
    data () {
      return {
        openid: localStorage.openid,
        id: '',
        picklist: {},
        houses: [],
        house0: [],
        house1: [],
        house2: [],
        house3: [],
        house4: [],
        spec0: 0,
        spec1: 0,
        spec2: 0,
        spec3: 0,
        spec4: 0,
        wxParams: {},
        status: '',
        nodeid: '',
        annex: '',
        title: '',
        images: {
          serverId: [],
          srcStr: [],
        }
        //picktype: 0   //3.3日解除注释
      }
    },
    mounted () {
      let that = this;

      this.id = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      this.annex = this.$route.query.annex;
      this.title = this.$route.query.title;
      this.getPicking(this.id, this);

      if (this.$route.query.status) {
        this.status = this.$route.query.status;
      }

    },
    computed: {
      title: function () {
        let name = '';
        switch (this.picklist.picktype) {
          case 1:
            name = '原材料领料出库'
            break;
          case 2:
            name = '产成品领料出库'
            break;
          case 3:
            name = '次品领料出库'
            break;
        }
        return name;
        //return this.picklist.picktype == 1 ? '生产加工领料出库' : '二次加工领料出库';
      }
    },
    watch: {
      'picklist': function (data) {
        let items = data.items;
        this.picktype = data.picktype;
        for (let i=0; i<items.length; i++) {
          this.getHouses(i, data.orgid, data.strmid, items[i].productid, this['spec' + i]);
        }
      },
      'spec0': function (val) {
        this.getHouses(0, this.picklist.orgid, this.picklist.strmid, this.picklist.items[0].productid, val);
      },
      'spec1': function (val) {
        this.getHouses(1, this.picklist.orgid, this.picklist.strmid, this.picklist.items[1].productid, val);
      },
      'spec2': function (val) {
        this.getHouses(2, this.picklist.orgid, this.picklist.strmid, this.picklist.items[2].productid, val);
      },
      'spec3': function (val) {
        this.getHouses(3, this.picklist.orgid, this.picklist.strmid, this.picklist.items[3].productid, val);
      },
      'spec4': function (val) {
        this.getHouses(4, this.picklist.orgid, this.picklist.strmid, this.picklist.items[4].productid, val);
      }
    },
    methods: {
      wxConfig: function(wxParams) {
        wx.config({
          debug: false,            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: wxParams.appid,    // 必填，公众号的唯一标识
          timestamp: wxParams.timestamp,  // 必填，生成签名的时间戳
          nonceStr: wxParams.nonceStr, // 必填，生成签名的随机串
          signature: wxParams.signature,// 必填，签名
          jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });
      },
      wxUoloadImage: function(that) {
        let cthis = this;
        //wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        document.querySelector('#selectImage').onclick = function () {
          wx.chooseImage({
            success: function (res) {
              $(function(){
                $.each( res.localIds, function(i, n){
                  wx.uploadImage({
                    localId: n,
                    isShowProgressTips: 1,
                    success: function (res) {
                      if (that.checkCore() == 'ios') {
                        wx.getLocalImgData({
                          localId: n, // 图片的localID
                          success: function (res2) {
                            cthis.$nextTick(function () {
                              cthis.images.srcStr.push(res2.localData);
                            })
                          }
                        });
                      } else {
                        cthis.$nextTick(function () {
                          cthis.images.srcStr.push(n);
                        })
                      }

                      cthis.images.serverId.push(res.serverId);
                    },
                    fail: function (res) {
                      $.alert(JSON.stringify(res));
                    }
                  });
                });
              });
            }
          });
        };
        //});

      },
      del: function (id){
        let cthis = this;
        $.actions({
          actions: [{
            text: "删除",
            onClick: function() {
              $.confirm("确定删除?", function() {
                //点击确认后的回调函数
                //删掉id
                var ids = cthis.images.serverId;
                var a =  ids.indexOf(id);
                cthis.$nextTick(function () {
                  cthis.images.serverId.splice(a,1);
                  cthis.images.srcStr.splice(a,1);
                })
                //$("#"+id).hide();
              }, function() {
                //点击取消后的回调函数
              });
            }
          }
          ]
        });
      },
      checkCore:function() {
        var u = navigator.userAgent;
        //var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;//g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);   //ios终端
        if (isIOS) {
          return 'ios';
        } else  {
          return 'android';
        }
      },
      getWxSignLink: function() {
        // 记录进入 App 时的 URL
        if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
          window.entryUrl = location.href;
        }

        return /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
      },
      filterHouse: function(item) {
        return {title: item.storeroomName, value:item.storeroomguid, storeqty:item.storeqty, unit:item.unit, productid:item.productid};
      },
      getPicking: function(id, that) {
        this.axios({
          method: 'post',
          url: '/sales/Whoutform!pickOutForm.action',
          params: {openid: this.openid, orderid: id, url: location.href.split("#")[0]}
        }).then(response => {
          if (response.status == 200) {
            this.picklist = response.data.picklist;
            let wxParams = response.data.params;
            //配置微信公众号参数
            this.wxConfig(response.data.params);
            //上传
            this.wxUoloadImage(that);
          } else {
            this.toastError('系统错误' + response.data.msg);
          }
        });
      },
      getHouses: function(index, orgid, strmid, productid, spec) {
        this.axios({
          method: 'get',
          url: '/sales/Whoutform!getPLInfo.action?openid=' + this.openid,
          params: {orgid: orgid, strmid: strmid, picktype: this.picktype, productid: productid, spec: spec}
        }).then(response => {
          if (response.data.houses != undefined) {
            let houseitem = 'house' + index;
            this[houseitem] = response.data.houses.map(this.filterHouse);
          } else {
            this.toastError('系统错误');
          }
        });
      },
      postForm: function () {
        if (this.annex.indexOf('whout') > -1 && this.images.serverId.length == 0) {
          this.toastError('单据不能为空！');
          return false;
        }

        if (!this.checkEmy('weight')) {
          this.toastText('重量有误！');
          return false;
        } else if (!this.checkEmy('room')) {
          this.toastText('库间有误！');
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");

        let postData = {};
        postData = this.serialize2Obj($("#formid").serializeArray());
        postData.nodeid = this.nodeid;
        postData.whoutformIds = this.images.serverId.join(',');
        postData.orderid = this.id;
        postData.opttype = 4;
        postData['entity.remark'] = $('#remark').val();
        this.axios({
          method: 'post',
          url: '/sales/Whoutform!doOutForm.action?openid=' + this.openid,
          params: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");

          if (response.data.msg == 'success') {
            this.toastSuccess('出库成功!');
            this.$router.push({name: 'PickingList', query:{stat: this.status}});
          } else {
            this.toastError('系统错误' + response.data.msg);
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          this.toastError('系统错误');
        });
      }
    }
  }
</script>
